[Refactor/#120] 상태 요약 카드를 공용 컴포넌트로 통합 - #122

#️⃣연관된 이슈

• Closes 상태 요약 카드를 공용 컴포넌트로 통합 #120

📚 스택 PR입니다 — base가 #117(feat/#114-home-routing) 브랜치예요. Files changed에는 이 PR 변경만 보입니다.
바꾸는 카드 셋이 #113(학생회비·사물함)과 #116(행사 신청내역)에 나뉘어 있어서, 셋이 다 있는 스택 맨 위에 쌓았습니다. 머지 순서: #113 → #116 → #117 → #120.

🎯 해결하려는 문제가 무엇인가요?

"상태 배지 + 제목 + 라벨/값 행" 요약 카드를 세 곳이 같은 마크업으로 각자 그리고 있었다(#116 리뷰에서 나온 의견).

❓ 왜 해결해야 하나요?

컴포넌트 컨벤션의 "두 번째 화면에서 재사용되면 components/ui/로 옮긴다" 기준을 넘었다. 지금처럼 세 벌이면 배지 크기나 행 간격이 바뀔 때 한쪽을 빠뜨리기 쉽고, 실제로 학생회비 카드만 행 간격이 달랐다.

⭐ 어떻게 해결했나요?

1. 공용 StatusSummaryCard (7b65e56) — components/ui/StatusSummaryCard.tsx

<StatusSummaryCard badge={{ label, color }} title={...} rows={[{ label, value }]} />

• 배지 매핑(FEE_STATUS_BADGES 등)은 각 기능 constants에 그대로 두고 화면이 골라 넘긴다 — 공용 UI가 기능 상수를 import하지 않는다
• 행 내용은 각 기능이 만든다. 그리기만 공용 카드가 맡는다

2. 세 곳 교체 (7b65e56, 830dd33, e99321c)

• 사물함·행사: 바꾸기 전과 카드 캡처가 바이트 단위로 같다(행사는 신청완료·신청취소 둘 다)
• EventsApplicationSummary는 "행사·신청·(취소)" 행만 만드는 파일로 남겼다
• 학생회비 "학생회 확인 내용" 카드, 사물함 "배정된 사물함" 카드는 구조가 달라 각 기능에 그대로 뒀다

3. 스켈레톤도 공용으로 (f829a0c) — 같은 파일의 StatusSummaryCardSkeleton(행 수만큼 rowWidths)

• 기존 스켈레톤은 행 사이를 8px로 그려서 데이터가 들어올 때 카드가 2~4px 줄어들었다. 이제 스켈레톤과 카드 높이가 같다(학생회비 166, 사물함·행사 142)

4. 카드 사이 간격 8px (0b4ba53) — 디자이너가 카드 사이 간격을 8px로 통일했다(Figma 4174:101198 간격통일). 이 PR 화면인 학생회비 납부 건끼리, 사물함 요약↔배정 카드, 신청내역 상세 카드 사이를 12→8px로(스켈레톤 포함). 나머지 화면(행사 신청 폼·홈·열린피드백 작성내역)은 별도 이슈로

5. 문서 (13aca08, 16ae84b) — wds-component-usage.md 내 내역·행사 신청내역 절

🧩 이 PR의 한계 & 트레이드오프

• 취소된 신청은 행이 하나 더 있는데, 데이터를 받기 전에는 취소 여부를 몰라 스켈레톤은 2줄이다(원래도 그랬다)
• 홈 내 정보·신청내역 목록 카드처럼 배지를 쓰는 다른 카드는 구조가 달라 이번 대상이 아니다

⛓️ 기존 기능에 미치는 영향

• 학생회비 납부 카드 행 간격 8px → 6px — 디자이너 확인 완료, Figma(3147:147879)도 6px로 고쳐졌다. 카드 높이가 2px 줄어든다
• 카드 사이 간격 12px → 8px — 학생회비 납부 건끼리, 사물함 배정 상태, 신청내역 상세
• 나머지 화면 모양은 그대로다

🔀 Edge Case & 실패 시나리오

• 학생회비 확인필요일 때 아래 확인 내용 카드·문의하기는 그대로 붙는다(채널 주소가 없으면 문의하기는 숨김 — #113과 같음)

📋 검토한 대안과 선택 이유

• 학생회비 행 간격: 옵션으로 8px 유지 vs 6px 통일 — 디자이너 확인 결과 6px로 통일
• EventsApplicationSummary: 지우고 상세 화면에서 행을 만들기 vs 행만 만드는 파일로 남기기 — 학생회비·사물함도 각자 행을 만드니 같은 모양이 되도록 남겼다

💬 리뷰 포인트

• [a] 행 간격 6px·카드 사이 8px은 디자이너 확인 완료(3147:147879, 4174:101198)
• [a] 공용 카드 이름 StatusSummaryCard